<template>
  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="节点统计" name="first">
      <div id="stage" style="min-width: 400px; height: 400px"></div>
      <div style="text-aglin: center">
        <el-table :data="bussiData" ref="bussiData">
          <el-table-column
            label="节点名称"
            prop="name"
            align="center"
          ></el-table-column>
          <el-table-column
            label="当前数量"
            prop="y"
            align="center"
          ></el-table-column>
        </el-table>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import HighCharts from "highcharts";
import store from "@/vuex/store";
import { staticStateApi } from "@/api/statistics/statisticsApi";
export default {
  data() {
    return {
      currentCode: store.getters.currentCode,
      activeName: "first",
      bussiData: [],
      streetStatisticsData: {
        credits: { enabled: false },
        chart: {
          plotBackgroundColor: null,
          plotBorderWidth: null,
          plotShadow: false,
          type: "pie",
        },
        title: {
          text: "节点统计",
        },
        tooltip: {
          pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>",
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: "pointer",
            dataLabels: {
              enabled: false,
            },
            showInLegend: true,
          },
        },
        series: [
          {
            name: "办件比",
            colorByPoint: true,
            data: [],
          },
        ],
      },
    };
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    stageChart() {
      HighCharts.chart("stage", this.streetStatisticsData);
    },
    //获得统计数据
    getData() {
      staticStateApi(this.currentCode)
        .then((res) => {
          if (res.data.data) {
            this.streetStatisticsData.series[0].data = res.data.data;
            this.bussiData = res.data.data;
            this.stageChart();
          }
          // console.log(this.streetStatisticsData.series[0].data);
        })
        .catch((err) => {
          this.$message.info("暂无数据！");
        });
    },
  },
  mounted() {
    this.getData();
    // this.stageChart();
  },
};
</script>

<style >
.el-tabs__nav .is-top {
  background-color: #fff;
}
.el-tabs__header {
  margin: 0;
}
.el-steps--horizontal {
  padding: 20px 0 20px 0;
}
.el-tabs__nav-scroll {
  padding-top: 20px;
}
</style>